import { useEffect, useState } from 'react'
import { Grid } from 'antd-mobile'
import { Spin } from 'antd'
import { useNavigate } from 'react-router-dom'
import { getDischargeInfo } from '@/api/cyjs.js'
import { UserOutline } from 'antd-mobile-icons'
import './index.less'

function Page() {
	const navigate = useNavigate()
	const [loading, setLoading] = useState(true)
	const [list, setList] = useState([])

	useEffect(() => {
		setLoading(true)
		getDischargeInfo({ 参数: [{ deptbed: '101' }] }).then(res => {
			const result = res.DATA || []
			result.map((l, i) => {
				l.key = i + 1
			})
			setList(result)
			setLoading(false)
		})
		//PNAME MRN DISCD BEDID NSPRINTFLAG DAYS
	}, [])

	const clickLine = line => {
		const { SERIES, MRN } = line
		navigate('/fy', {
			state: { SERIES, MRN },
			replace: true,
			shouldNavigate: true
		})
	}

	return (
		<div>
			<Spin spinning={loading}>
				{list.map(line => (
					<div
						key={line.key}
						className="row"
						onClick={() => {
							clickLine(line)
						}}
					>
						<div style={{ display: 'flex', padding: '10px 0' }}>
							<UserOutline style={{ fontSize: '26px' }} />
							<div style={{ padding: '0 10px', lineHeight: '26px', fontSize: '18px', fontWeight: 'bold' }}>
								{line.PNAME}
							</div>
							<div style={{ marginLeft: 'auto', lineHeight: '28px', color: '#999' }}>
								<span style={{ padding: '0 5px' }}>病历号:</span>
								{line.MRN}
							</div>
						</div>
						<Grid columns={2} gap={8}>
							<Grid.Item style={{ textAlign: 'left', color: '#000' }}>
								<div>
									<span style={{ paddingRight: '5px', width: '90px' }}>床位号:</span>
									<span style={{ width: '90px', whiteSpace: 'nowrap', textOverflow: 'ellipsis', overflow: 'hidden' }}>
										{line.BEDID}
									</span>
								</div>
							</Grid.Item>
							<Grid.Item style={{ textAlign: 'left', color: '#000' }}>
								<div>
									<span style={{ paddingRight: '5px', width: '90px' }}>出院日期:</span>
									<span style={{ width: '90px', whiteSpace: 'nowrap', textOverflow: 'ellipsis', overflow: 'hidden' }}>
										{line.DISCD}
									</span>
								</div>
							</Grid.Item>
						</Grid>
						<Grid columns={2} gap={8}>
							<Grid.Item style={{ textAlign: 'left', color: '#000' }}>
								<div>
									<span style={{ paddingRight: '5px', width: '90px' }}>打印状态:</span>
									<span style={{ width: '90px', whiteSpace: 'nowrap', textOverflow: 'ellipsis', overflow: 'hidden' }}>
										{line.NSPRINTFLAG}
									</span>
								</div>
							</Grid.Item>
							<Grid.Item style={{ textAlign: 'left', color: '#000' }}>
								<div>
									<span style={{ paddingRight: '5px', width: '90px' }}>住院天数:</span>
									<span style={{ width: '90px', whiteSpace: 'nowrap', textOverflow: 'ellipsis', overflow: 'hidden' }}>
										{line.DAYS}
									</span>
								</div>
							</Grid.Item>
						</Grid>
					</div>
				))}
			</Spin>
		</div>
	)
}

export default Page
